<template>
    <div class="box">
        <div class="captcha_box">
            <h3>验证码登录</h3>
            <!-- 输入框 -->
            <div class="input_box">
                <div class="tel">
                    <button @click="changeTel">手机号&nbsp;&nbsp;
                        <span>{{code}}</span>
                        <van-icon name="arrow-down" />
                    </button>
                    <input type="tel" placeholder="请输入手机号码" v-model="phoneNumber">
                </div>
                <div class="captcha">
                    <van-field v-model="inputCode" center clearable label="校验码" placeholder="请输入校验码">
                        <template #button>
                            <div class="check_code">
                                <span>{{checkCode}}</span>
                            </div>
                        </template>
                    </van-field>
                </div>
            </div>
            <!-- 同意用户协议 -->
            <div class="gree_box">
                <input type="radio" name="gree" @click="changeGree">
                <span class="gree_text">
                    <span class="text1">我已阅读并同意签署</span>
                    <router-link to="/userAgreement">
                        <span class="text">《用户协议》</span>
                    </router-link>
                    <router-link to="/PrivacyPolicy">
                        <span class="text">《隐私政策》</span>
                    </router-link>
                </span>
            </div>
            <!-- 获取短信验证 -->
            <van-button round class="btn" :disabled="checkedState" @click="getCode">获取短信验证码</van-button>
            <router-link to="/UserPwdLogin">
                <span class="pwdLogin">密码登录</span>
            </router-link>
        </div>
        <div class="setShop">
            <router-link to="/CreateAccountNum">
                <span>我要开店</span>
            </router-link>
        </div>
    </div>
</template>

<script>
import { mapActions } from "vuex";
import { Notify } from 'vant';
export default {
    data() {
        return {
            checkCode: "", // 系统生成的校验码
            phoneNumber: "", //手机号码
            inputCode: "", // 校验码
            checkedState: true,
            code: '76'
        }
    },
    created() {
        this.code = this.$store.state.login.areaCode
        this.generateCode()
    },
    methods: {
        ...mapActions(['login/getPhoneNum']), //获取手机号码
        changeTel() {
            this.$router.push('/SelectTel')
        },
        changeGree() {
            this.checkedState = !event.target.checked
        },
        getCode() {
            let pattern = /0?(13|14|15|18|17)[0-9]{9}/
            if (pattern.test(this.phoneNumber)) {
                if (this.inputCode == this.checkCode) {
                    this.checkedState = true
                    this['login/getPhoneNum'](this.code + this.phoneNumber)
                    this.$router.push('/GetVerificationCode')
                } else {
                    Notify({ type: 'danger', message: '校验码错误' });
                    this.generateCode()
                }
                return
            }
            Notify({ type: 'danger', message: '手机号不符合规则' });
            this.checkedState = false
        },
        // 生成校验码
        generateCode(){
            this.checkCode = Math.floor(Math.random() * (9999 - 1000) + 1000);
        }
    },
}
</script>

<style scoped>
.box {
    display: flex;

    flex-direction: column;
    justify-content: space-between;
    height: 667px;
}

.captcha_box {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.captcha_box h3 {
    margin: 40px 20px;
    font-weight: 400;
    align-self: flex-start;
}

/* 输入框模块 */
.input_box {
    margin: 0 auto;
    width: 90%;
}

.tel {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #cfccd6;
}

.tel button {
    width: 35%;
    font-size: 15px;
    border: none;
    padding: 6px 0;
    background-color: #ffffff;
    text-align: left;
    padding-left: 4%;
    /* background-color: pink; */
}

.tel input {
    font-size: 15px;
    width: 60%;
    border: none;
}

.captcha {
    border-bottom: 1px solid #cfccd6;
}

input::placeholder {
    color: #cfccd6;
}

/* 校验码 */
.check_code {
    padding: 0 10px;
    background-color: pink;
    color: slateblue;
    font-size: 16px;
}

/* 已阅读 */
.gree_box {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
}

.text1 {
    color: #a8a7a9;
}

.text {
    color: #ff6e53;
}

/* 短信验证按钮 */
.btn {
    width: 90%;
    background-color: #ff6e53;
    text-align: center;
    color: #ffff;
    font-size: 16px;

}

.pwdLogin {
    font-size: 15px;
    margin-top: 40px;
    color: #ff6e53;
}

.setShop {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
}
</style>
